<template>
    <div>
        <el-dialog title="添加活动" v-model="props.visible" :before-close="beforeClose">
            <el-form :model="ownForm" label-width="100px" width="400px">
                <!-- <el-form :model="ownForm" label-width="100px"> -->
                <el-form-item label="活动标题 :">
                    <el-input style="width: 250px;" v-model="ownForm.title"></el-input>
                </el-form-item>
                <el-form-item label="开始时间 :">
                    <el-date-picker v-model="ownForm.createTime" type="date" placeholder="Pick a date" />
                </el-form-item>
                <el-form-item label="结束时间 :">
                    <el-date-picker v-model="ownForm.startDate" type="date" placeholder="Pick a date" />
                </el-form-item>
                <el-form-item label="上线/下线 ">
                    <el-radio-group v-model="ownForm.status">
                        <el-radio :label="1" size="large">上线</el-radio>
                        <el-radio :label="0" size="large">下线</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <template #footer>
                <span>
                    <el-button @click="onCancel">取消</el-button>
                    <el-button type="primary" @click="onConfirm">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, defineProps, defineEmits, withDefaults } from 'vue';
import type { Ref } from 'vue';
// 数据约束
import type { IFlashListItem } from '../../../request/SmsAdminConreiller/index'

// 相当于一个空的备份
let originForm = ref({}) as Ref<IFlashListItem>
let ownForm = ref({}) as Ref<IFlashListItem>
// 自定义事件
let emits = defineEmits<{
    (event: "cancel"): void;
    (event: "confirm", row: IFlashListItem): void
}>()
// 监听form变化
watch(() => props.form, (newVal) => {
    // console.log(newVal);
    ownForm.value = { ...newVal }
    originForm.value = { ...newVal }
})

// 关闭弹出框的回调
let beforeClose = () => {
    onCancel()
}
// 取消
let onCancel = () => {
    emits("cancel")
}
// 确定
let onConfirm = () => {
    // 将参数返回给父级 ，让父级发请求完成功能
    emits('confirm', ownForm.value)
    onCancel()
}
// 接收父组件数据
let props = withDefaults(
    defineProps<{
        visible: boolean;
        form: IFlashListItem
    }>(), {
    visible: true,
})


</script>

<style lang="scss" scoped></style>